<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-06 10:31:03
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-06 15:32:49
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        *{
            /* 覆盖全局默认样式 */
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            text-decoration:none;
        }
        body{
            padding-top:25px;
            background-image:url(./img/login_bg.png);
            background-repeat:no-repeat;
            background-position: center;
        }
        #app{
            /* border: 1px solid red; */
            width:900px;
            height: 500px;
            border:8px solid #eee;
            /* 让div水平居中 */
            margin: auto;
            background-color: white;
        }
        .divleft,.divmiddle,.divright{
            /* border: 1px solid red; */
        }
        .divleft{
            float: left;
            width:25%;
            padding-top: 15px;
            padding-left:15px;
        }
        .divleft>p:first-child{
            color: #ffd026;
            font-size: 20px;
        }
        .divleft>p:last-child{
            color: #a6a6a6;
            font-size: 20px;
            /* font-weight: bold; */
        }
        .divmiddle{
            float: left;
            /* 这里减去的值是左右宽度 */
            width:calc(100%-25%-25%);
        }
        table{
            color: #a6a6a6
        }
        .tdleft{
            width: 100px;
            height: 45px;
            text-align: right;
            padding-right:45px;
        }
        /* 单独设置验证码图片的样式 */
        #imagecode{
            height: 32px;
            /* 垂直居中 */
            vertical-align: middle;
        }
        /* 表单中提交按钮的td */
        #tdsubmit{
            text-align: center;
        }
        #btnSubmit{
            width: 115px;
            height:30px;
            background-color: #ffd026;
            border: 0px;
            color: #a6a6a6;
            border-radius: 5px;
        }
        /* 定义了一个选择器，它选择了所有具有id为username、password等为这些元素设置了统一的样式 */
        #username,#password,#checkcode,#Email,#姓名,#手机号,#出生日期{
            width: 251px;
            height: 32px;
            border: 1px solid #a6a6a6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }
        
        .divright{
            float: right;
            width:25%;
            padding-top: 15px;
            padding-right:15px;
        }
        .divright>p{
            font-size: 15px;
            color: #a6a6a6;
            text-align: right;
        }
        .divright>p a{
            color:pink;
        }
    </style>
</head>
<body>
    <!-- 分析页面布局 -->
    <!-- body或者和body一样大的div设置背景图片 -->
    <!-- 页面中间有一个div居中显示 -->
    <!-- 分析div 左中右三块布局 -->
    <div id="app">
        <!-- 左侧 -->
        <div class="divleft">
            <P>新用户注册</P>
            <p>USER REGISTER</p>
        </div>
        <!-- 中间 -->
        <div class="divmiddle">
            <div class="divForm">
                <!-- 表单元素 -->
                <form action="#" method="post">
                    <table>
                        <tr>
                            <!-- 使得这个单元格的内容靠左对齐。 -->
                            <td class="tdleft">
                                <label class=""for="username">
                                用户名
                                </label>
                            </td>
                            <td class="tdright">
                                <input type="text" name="username" id="username"
                                id="username" placeholder="请输入用户名">
                            </td>
                        </tr>
                        <tr>
                        <td class="tdleft">
                                <label class=""for="password">
                                密码
                                </label>
                                <td class="tdRight">
                                <input type="text" name="password" id="password"
                                id="password" placeholder="请输入密码">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdleft">
                                    <label class=""for="Email">
                                    Email
                                    </label>
                                    <td class="tdRight">
                                    <input type="text" name="Email" id="Email"
                                    id="Email" placeholder="请输入Email">
                                </td>
                        </tr>
                        <tr>
                            <td class="tdleft">
                                    <label class=""for="姓名">
                                    姓名
                                    </label>
                                    <td class="tdRight">
                                    <input type="text" name="姓名" id="姓名"
                                    id="姓名" placeholder="请输入真实姓名">
                                </td>
                        </tr>
                        <tr>
                            <td class="tdleft">
                                    <label class=""for="手机号">
                                    手机号
                                    </label>
                                    <td class="tdRight">
                                    <input type="text" name="手机号" id="手机号"
                                    id="手机号" placeholder="请输入您的手机号">
                                </td>
                        </tr>
                        <tr>
                        <td class="tdleft">
                            <label class=""for="gender">
                                性别
                            </label>
                        </td>
                        <td class="tdRight">
                            <!-- type="radio" 表示这是一个单选按钮，name="gender" 表示这个按钮属于名为"gender"的按钮组，value="male" 表示当这个按钮被选中时，表单提交的值是"male"。 -->
                            <input type="radio"name="gender"value="male">男
                            <input type="radio"name="gender"value="female">女
                        </td>
                        </tr>
                        <tr>
                            <td class="tdright">
                                <label class=""for="出生日期">
                                    出生日期
                                </label>
                            </td>
                                <td class="tdRight">
                                <input type="date" name="birth" id="出生日期">
                            </td>
                        
                        </tr>
                        <tr>
                            <td class="tdleft">
                                <label class=""for="checkcode">
                                验证码
                                </label>

                            </td>
                            
                            <td class="tdRight">
                                <input type="text" name="checkcode" id="checkcode"
                                id="checkcode" placeholder="请输入验证码">
                                <img id="imagecode" src="./img/verify_code.jpg"alt="">
                            </td>
                        </tr>
                        <tr>
                            <td id="tdsubmit" colspan="2"><input id="btnSubmit" type="submit"
                                value="注册">
                            </td>

                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="divright">
            <p>已有账号？<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>